<template>
	<view class="container" style="">
		<commonNav :currentSewLine="currentSewLine.sewingName" :navTitle="navTitle" @backRouter="backToLog" />
		<view class="form">
			<!-- 单号 款名 款号 客户 颜色 尺码 -->
			<u--form labelPosition="top" :model="formData" ref="from1">
				<u-form-item :label="$t('pages.quality.productionNo')" prop="productionInfo.billNo" borderBottom ref="item1">
					<!-- <view @click="changeShow = true"> -->
					{{ formData.billNo }}
					<!-- </view> -->
				</u-form-item>
				<u-form-item :label="$t('pages.quality.styleName')"  borderBottom ref="item1" style="width: 30%;">
					{{ formData.styleName }}
				</u-form-item>
				<u-form-item :label="$t('pages.quality.styleNo')" borderBottom ref="item1">
					{{ formData.styleNo }}
				</u-form-item>
				<u-form-item :label="$t('pages.quality.customer')" borderBottom ref="item1">
					{{ formData.customerName }}
				</u-form-item>
				<u-form-item :label="$t('pages.quality.color')" borderBottom ref="itemColor">
					<view @click="commonShow.colorShow = true">
						{{ formData.color }}
					</view>
				</u-form-item>
				<u-form-item :label="$t('pages.quality.size')" borderBottom ref="itemSize">
					<view @click="commonShow.sizeShow = true">
						{{ formData.size }}
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class="statistics">
			<view class="number">
				<view class="number-title">{{ $t('pages.quality.pass') }}</view>
				{{ formData.qualifiedNum || 0 }}
			</view>
			<view class="number">
				<view class="number-title">{{ $t('pages.quality.rework') }}</view>
				{{ formData.unqualifiedNum || 0 }}
			</view>
			<view class="number">
				<view class="number-title">{{ $t('pages.quality.scarp') }}</view>
				{{ formData.discardedNum || 0 }}
			</view>
		</view>
		<view class="table" id="tableContainer">
			<uni-table :stripe="true" :emptyText="$t('common.noData')">
				<!-- 表头行 -->
				<uni-tr style="background: #E8E8E8;" class="tableHeader">
					<uni-th width="50px" align="center">{{ $t('pages.quality.no') }}</uni-th>
					<uni-th width="100px" align="center">{{ $t('pages.quality.type') }}</uni-th>
					<uni-th width="100px" align="center">{{ $t('pages.quality.content') }}</uni-th>
					<uni-th width="80px" align="center">{{ $t('pages.quality.pieces') }}</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
                <uni-tr v-for="(item, index) in tableList" :key="index" class="tableContent">
					<uni-td align="center">{{index + 1}}</uni-td>
					<uni-td align="center">
						<view class="td-select" @click.stop="getCurrentRowInfo(item)">
							{{ item.type ? $t('pages.quality.probProcess') : $t('pages.quality.defects') }}
						</view>
					</uni-td>
					<uni-td align="center">
						<view class="td-select" @click.stop="getCurrentRowInfoDetail(item)">
							{{ item.content }}
						</view>
					</uni-td>
					<uni-td align="center">
						<view>
							{{  item.num }}
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
    import storage from "@/utils/storage.js"
    import commonNav from "@/components/nav/commonNav.vue"

	export default {
		components: {
			commonNav
		},
		data() {
			return {
				navTitle: this.$t('home.cacheDetail'),
                formData: {},
                currentSewLine: storage.get('currentSewLineInfo') || {
                    sewingName: '未选择缝制线'
                },
                queryParams: {
                    sewingId: ''
                },
                tableList: []
            }
		},
        mounted() {
            this.formData =  storage.get('cacheDetail') || {}
            const { processesList, defectiveSpotList } = this.formData
            
            const arr = []
            // processName
            // defectiveSpot
            processesList.forEach(item => {
                +item.questionNum && arr.push({
                    type: 1,
                    num: item.questionNum,
                    content: item.processName
                })
            })
            defectiveSpotList.forEach(item => {
                +item.questionNum && arr.push({
                    type: 0,
                    num: item.questionNum,
                    content: item.defectiveSpot
                })
            })
            this.tableList = arr

            uni.createSelectorQuery().select('#tableContainer').boundingClientRect(function(rect){
                //  console.log(rect.top); // 输出节点的offsetTop值
                //  console.log(rect, '~~~~~~~~'); // 输出节点的offsetTop值
            }).exec();
        },
        methods: {
            backToLog() {
                uni.navigateTo({
                    url: `/pages/cacheList/index?sewingId=${this.queryParams.sewingId}`
                })
            }
        },
        onLoad(option) {
            this.queryParams.sewingId = option.sewingId
        }
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		// height: 100vh;
	}

	.form {
		padding-top: 5%;
	}

	.u-form {
		display: flex;
		flex-wrap: wrap;
		font-size: 1rem;
	}

	.u-form-item {
		width: 20%;
		margin: 1% 1%;
	}

	/deep/ .u-form-item__body__left {
		width: 938.086rpx !important;
	}
	/deep/ .u-form-item__body__left__content__label {
		font-size: 1rem;
	}

	/deep/ .uni-input-input {
		font-size: 1rem;
	}

	.table {
		padding-bottom: 7%;
		margin-top: 6%;
    

        /deep/ .uni-table-scroll {
            position: relative;
            height: 38vh !important;
        }
		/deep/ .uni-table-th-content {
			font-size: 1rem;
		}

		.uni-table-td {
			font-size: 1rem;
		}

		/deep/ .u-tabs__wrapper__nav__item__text {
			font-size: 1.2rem;
		}
	}

    .tableHeader {
        position: sticky;
        top: 0;
    }

    .statistics {
		display: flex;

		.number {
			width: 30%;
			margin-left: 2%;
			font-size: 1.2rem;
			display: flex;
			align-items: center;
		}
	}

    .number-title {
        padding-right: 16px;
    }
</style>
